import Head from 'next/head'
import React from 'react'

import styles from '@/styles/Common.module.scss'
import Script from 'next/script'

interface PropsType {
  title: string
  desc?: string
  css?: string
  js?: string
  children: JSX.Element | JSX.Element[]
}

const PageWrapper: React.FC<PropsType> = ({
  title,
  desc = '',
  children,
  css: cssCode,
  js: jsCode,
}) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={desc} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        <style>{cssCode}</style>
      </Head>
      <main className={styles.container}>{children}</main>
      <Script id="page_js">{jsCode}</Script>
    </>
  )
}

export default PageWrapper
